<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
    >
<!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="/webjars/adminlte/2.3.11/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/webjars/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/webjars/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/webjars/adminlte/2.3.11/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="/webjars/adminlte/2.3.11/dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet" href="/public/css/login.css" />
  <script src="/webjars/adminlte/2.3.11/plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script src="/public/js/login/EasePack.min.js"></script>
  <script src="/public/js/login/rAF.js"></script>
  <script src="/public/js/login/TweenLite.min.js"></script>
<head>
<meta charset="utf-8">
    <head>
        <title>智慧物联平台</title>

    </head>

<body   id="large-header">
    <div id="owr">
   	 <canvas id="demo-canvas" ></canvas>
      <div class="login-box-bg">
      		
            <div class="login-box-main">
          		<div>
		                 <div class="login-logo" style="background:none;"></div>
		                 <div class="login-welcome" style="font-size:24px;">
		                 <br/>
				              欢迎登录智慧物联平台
                 </div> 
                 <div style="display:none;">
		                 <div class="login-logo"></div>
		                 <div class="login-welcome">
				          <br/>
				              欢迎登录中乂物联智慧消防平台
                  </div>
                 </div> 
                  <div class="login-tip">
                      <div th:if="${param.error}">
                            用户名或密码错
                      </div>
                      <div th:if="${param.logout}">
                            您已注销成功
                      </div>
                  </div>
                   <form th:action="@{/login}" method="post">
                          <div class="form-group has-feedback">
                         <!--  <input type="hidden" 
           th:name="${_csrf.parameterName}" 
           th:value="${_csrf.token}" /> -->
                              <input id="username" type="text" class="form-control"  name="username" placeholder="用户名" th:value=${username} th:attr="auto=${auto}">
                              <span class="glyphicon glyphicon-user form-control-feedback"></span>
                          </div>
                          <div class="form-group has-feedback">
                              <input id="password" type="password" class="form-control" name="password" placeholder="密码" th:value=${password}>
                              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                          </div>
                           <div class="login-row" style="visibility: hidden">
                                         <input type="checkbox" name="remember-me" /> 记住密码
                           </div>
                           <div class="login-row">
                                   <button id="loginbtn" type="submit" class="btn bg-aqua btn-block btn-flat btnLogin">登&nbsp;录</button>
                           </div>
                   </form>
            </div>
            
      </div>
      <div class="login-word" >   
      	
      </div>
	  </div>  
	 </div>
	 
	 
<script>
$("#owr").hide();
(function() {

/*     $("#username").val("admin");
    $("#password").val("1234567"); */
    
    
    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

	var auto = $("#username").attr("auto");
	if(auto=="true"){
		$("#owr").hide();
		$("#loginbtn").click();
		setTimeout(function(){
			var webhost = location.hostname.toLowerCase();
			if(webhost.indexOf("com")>=0){
				window.location="http://"+webhost+"/";
				
			} else {
				window.location="http://"+webhost+":9090/";
			}
		},500)
	} else {
		$("body").addClass("login-body");
		$("#owr").show();   		
	}


    //Main
    initHeader();
    initAnimation();
    addListeners();


    
    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create points
        points = [];
        for(var x = 0; x < width; x = x + width/20) {
            for(var y = 0; y < height; y = y + height/20) {
                var px = x + Math.random()*width/20;
                var py = y + Math.random()*height/20;
                var p = {x: px, originX: px, y: py, originY: py };
                points.push(p);
            }
        }

        // for each point find the 5 closest points
        for(var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for(var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if(!(p1 == p2)) {
                    var placed = false;
                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for(var i in points) {
            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if(!('ontouchstart' in window)) {
            window.addEventListener('mousemove', mouseMove);
        } 
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = (window.innerWidth)/2;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        for(var i in points) {
            shiftPoint(points[i]);
        }
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in points) {
                // detect points in range
                if(Math.abs(getDistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                drawLines(points[i]);
                points[i].circle.draw();
            }
        }
        requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
            onComplete: function() {
                shiftPoint(p);
            }});
    }

    // Canvas manipulation
    function drawLines(p) {
        if(!p.active) return;
        for(var i in p.closest) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.closest[i].x, p.closest[i].y);
            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
            ctx.stroke();
        }
    }

    function Circle(pos,rad,color) {
        var _this = this;

        // constructor
        (function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function() {
            if(!_this.active) return;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
            ctx.fill();
        };
    }

    // Util
    function getDistance(p1, p2) {
        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }
    

})();
</script>
</body>
</html>  
